import Vue from 'vue';

// 我自己的 aurora
import busHolder from '../vue/bus';
import '../vue/topnav';

import { Gallery } from './gallery/index';

let bus = busHolder.getBus;
const g = new Gallery();

import('../vue/ants.js')
  .then(() => g.initFromServer())
  .then(scenes => {
    let v = new Vue({
      el : '#root',
      data : {
        scenes,
        tags: g.getAllTags(),
        selectTag: null, // null 就是点击全部
        find: '',
        // 模态框
        modalVisible: false,
        chooseScene: null, // scene 对象
        modalName: '',
        bootParam: '', // 启动选项, 场景启动时的选项
        // antd : list
        showAdvOpt: false,
        showLoadingMore : false,
        loadingMore : false,
        loading : true
      },
      methods : {
        onLoadMore : function () {
          console.log('onLoadMore');
        },
        refresh : function () {
          v.loading = true;
          g.initFromServer().then((_) => {
              v.scenes = g.getScenesByTag(v.selectTag);
              v.tags = g.getAllTags();
              v.loading = false;
            });
        },
        actTagSelect : function (tagName) {
          this.selectTag = tagName;
          this.scenes = g.getScenesByTag(tagName);
        },
        // 模态框
        actModalCreate : function (chooseScene) {
          this.chooseScene = chooseScene;
          this.modalName = this.chooseScene.title;
          this.bootParam = '';
          this.showAdvOpt = false;
          this.modalVisible = true;
        },
        actModalClose : function () {
          this.modalVisible = false;
        },
        actAdvOpt : function () {
          this.showAdvOpt = true;
        },
        copyLink : function () {
          var aux = document.createElement("input"); 
          aux.setAttribute("value", this.modalLink); 
          document.body.appendChild(aux); 
          aux.select();
          document.execCommand("copy"); 
          document.body.removeChild(aux);

          try {
            this.$message.success('已将链接复制到剪贴板。');
          } catch (e) {
            console.error(e);
          }
        },
        defaultLink : function (scene) {
          let text = location.origin + '/aurora/scene/'
              + scene.series + '/'
              + scene.scene
              + '?name=' + encodeURIComponent(scene.title);
          return text;
        },
      },
      computed : {
        subtitle : function () {
          if (this.loading) {return "正在加载所有场景";}
          if (this.scenes.length) {return `这里陈列着 ${this.scenes.length} 个可用于直播的场景模板, 点击下面标签可以过滤`;}
          return "没有可用的直播场景模板";
        },
        filterScenes : function () {
          if (this.find === '') return this.scenes;
          return this.scenes.filter((scene) => {
            return scene.title.indexOf(this.find) >= 0
                || scene.desc.indexOf(this.find) >= 0
                || scene.series.indexOf(this.find) >= 0
                || scene.scene.indexOf(this.find) >= 0});
        },
        modalTitle : function () {
          return (this.chooseScene) ? `为场景：${this.chooseScene.title} 创建链接` : '';
        },
        modalLink : function () {
          if (!this.chooseScene) return "";

          let text = location.origin + '/aurora/scene/'
              + this.chooseScene.series + '/'
              + this.chooseScene.scene;
          let ps = [];
          if (this.modalName != '') {
            ps.push('name=' + encodeURIComponent(this.modalName));
          }
          if (this.bootParam != '') {
            ps.push('p=' + encodeURIComponent(this.bootParam));
          }
          if (ps.length > 0) {
            text = text + '?' + ps.join('&');
          }
          return text;
        },
        modalSceneWidth : function () {
          if (!this.chooseScene) {return "";}
          return this.chooseScene.width == null ? '随意' : this.chooseScene.width;
        },
        modalSceneHeight : function () {
          if (!this.chooseScene) {return "";}
          return this.chooseScene.height == null ? '随意' : this.chooseScene.height;
        }
      },
      mounted : function () {
        bus().$on(busHolder.KEY_TOP_NAV_CLICK, (url) => {
          location.href = url;
        });
      }
    });

    v.refresh();
  });


